<template>
    <div ref="componentRef" class="aircraft-info-panel">
        <div
            class="flex flex-justify-between items-center rounded-[16px] border-gray-200 border-solid border-[2px] mb-2 p-2">
            <div class="flex flex-col">
                <div class="text-[17px] font-italic mb-0">2024</div>
                <div class="text-[14px] font-italic">11/20</div>
            </div>
            <div class=" bg-gray-200 w-[1px] h-6"></div>
            <div class="flex flex-col">
                <div class="text-[12px] text-gray-600 mb-0">起飞时间</div>
                <div class="text-[18px]">12:34</div>
            </div>
            <div class=" bg-gray-200 w-[1px] h-6"></div>
            <div class="flex flex-col">
                <div class="text-[12px] text-gray-600 mb-0">降落时间</div>
                <div class="text-[18px]">15:22</div>
            </div>
            <div class=" bg-gray-200 w-[1px] h-6"></div>
            <div class="flex flex-col">
                <div class="text-[12px] text-gray-600 mb-0">当前时间</div>
                <div class="text-[18px]">12:34:38</div>
            </div>
            <div class=" bg-gray-200 w-[1px] h-6"></div>
            <div class="flex flex-col mt-[-2px]" style="transform: scale(0.8);">
                <div class="text-[12px] text-gray font-italic">准备中</div>
                <div class="text-[12px] text-blue-500 font-italic">飞行中</div>
                <div class="text-[12px] text-gray font-italic">作业中</div>
            </div>
        </div>
        <div
            class="flex flex-justify-between items-center rounded-[16px] border-gray-200 border-solid border-[2px] mb-2 p-2">
            <div class="flex flex-col">
                <div class="text-[12px] text-gray-600 mb-1">当前经度</div>
                <div class="text-[12px]">116.4074° E</div>
            </div>
            <div class="flex flex-col">
                <div class="text-[12px] text-gray-600 mb-1">纬度</div>
                <div class="text-[12px]">39.9042° N</div>
            </div>
            <div class="flex flex-col">
                <div class="text-[12px] text-gray-600 mb-1">方向</div>
                <div class="text-[12px]">15°🛪</div>
            </div>
            <div class=" bg-gray-200 w-[1px] h-6"></div>
            <div class="flex flex-col">
                <div class="text-[12px] text-gray-600">海拔</div>
                <div class="text-[16px]">1234<i class="text-[12px]">m</i></div>
            </div>
            <div class="flex flex-col">
                <div class="text-[12px] text-gray-600">航速</div>
                <div class="text-[16px]">300<i class="text-[12px]">km/h</i></div>
            </div>
        </div>
        <div
            class="flex flex-justify-between items-center rounded-[16px] border-gray-200 border-solid border-[2px] mb-2 p-2">
            <div class="flex flex-col">
                <div class="text-[12px] text-gray-600 mb-1">催化剂</div>
                <div class="text-[14px] text-align-center">焰条</div>
            </div>
            <div class=" bg-gray-200 w-[1px] h-6"></div>
            <div class="flex flex-col">
                <div class="text-[12px] text-gray-600 mb-1">人工冰核</div>
                <div class="text-[14px]  text-align-center">-</div>
            </div>
            <div class=" bg-gray-200 w-[1px] h-6"></div>
            <div class="flex flex-col">
                <div class="text-[12px] text-gray-600 mb-1">制冰剂</div>
                <div class="text-[14px] text-align-center">-</div>
            </div>
            <div class=" bg-gray-200 w-[1px] h-6"></div>
            <div class="flex flex-col">
                <div class="text-[12px] text-gray-600 mb-1">吸湿剂</div>
                <div class="text-[14px] text-align-center">-</div>
            </div>
            <div class=" bg-gray-200 w-[1px] h-6"></div>
            <div class="flex flex-col">
                <div class="text-[12px] text-gray-600 mb-1">其他</div>
                <div class="text-[14px] text-align-center">-</div>
            </div>
        </div>
        <div ref="chartRef" class="chart"></div>
    </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, nextTick, computed } from "vue";
import * as echarts from "echarts";
const props = defineProps({
    data: {
        type: Object,
        default: {}
    }
});
const loadData = () => {

}
const componentRef = ref(null);
const chartRef = ref(null);
var chartInstance = null;
const chartOption = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['温度', '湿度', '海拔'],
        right: '5%',
        top: '5%',
        orient: 'horizontal',
        textStyle: {
            color: '#666'
        }
    },
    grid: {
        left: '40px',
        top: '40px',
        bottom: '40px'
    },
    xAxis: {
        type: 'category',
        data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00'],
        axisLabel: {
            color: '#666'
        },
        axisLine: {
            lineStyle: {
                color: '#ddd'
            }
        }
    },
    yAxis: [
        {
            type: 'value',
            name: '海拔 (米)',
            position: 'left',
            axisLabel: {
                color: '#666'
            },
            axisLine: {
                lineStyle: {
                    color: '#ddd'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#eee'
                }
            }
        },
        {
            type: 'value',
            name: '温湿度',
            position: 'right',
            axisLabel: {
                color: '#666'
            },
            axisLine: {
                lineStyle: {
                    color: '#ddd'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#eee'
                }
            }
        }
    ],
    series: [
        {
            name: '温度',
            type: 'line',
            smooth: true,
            showSymbol: false,
            yAxisIndex: 1, // 使用右侧的 y 轴
            itemStyle: {
                color: '#FF7F50'
            },
            data: [20, 22, 25, 28, 30, 32, 31, 29, 27]
        },
        {
            name: '湿度',
            type: 'line',
            smooth: true,
            showSymbol: false,
            yAxisIndex: 1, // 使用右侧的 y 轴
            itemStyle: {
                color: '#87CEFA'
            },
            data: [50, 55, 60, 65, 70, 75, 72, 68, 65]
        },
        {
            name: '海拔',
            type: 'line',
            smooth: true,
            showSymbol: false,
            itemStyle: {
                color: '#32CD32'
            },
            data: [100, 120, 150, 180, 200, 220, 210, 190, 170]
        }
    ]
};
onMounted(e => {
    if (componentRef.value) {
        const height = componentRef.value.offsetHeight;
        //console.log('组件高度:', height);
    }
    if (!chartInstance) {
        chartInstance = echarts.init(chartRef.value);
        chartInstance.setOption(chartOption);
    }
})
onUnmounted(() => {
    if (chartInstance) {
        chartInstance.dispose();
        chartInstance = null;
    }
});
defineExpose({ loadData });
</script>
<style lang="scss" scoped>
.aircraft-info-panel {
    .chart {
        width: 100%;
        height: 200px;
        border: 2px solid #e5e7eb;
        border-radius: 16px;
        box-sizing: border-box;
    }
}
</style>